<script setup lang="ts" name="SelectLandArrange">
import { onMounted, reactive, ref, watch } from "vue";
import { GetLandArrange } from "@/api/tally";
import { type ConfigProviderThemeVars, showFailToast } from "vant";
import type { ArrangeItem } from "@/utils/interface";


const themeVars: ConfigProviderThemeVars = {
  searchContentBackground: "#ffffff",
  searchPadding: "0px",
  buttonSmallHeight: "30px",
  buttonSmallPadding: "12px",
  buttonDefaultHeight: "35px",
  buttonIconSize: "10px"
};

onMounted(() => {
  getLandArrange();
});

const input = defineProps(["timeSpace", "planDate", "arrangeId"]);
const emit = defineEmits(["isOpen", "selectedArrange"]);
const isSearching = ref(false);
const arrangeList = ref([] as Array<ArrangeItem>);
const selectedArrangeItem = ref({} as ArrangeItem);

const searchParams = reactive({
  spot: "",
  isLeft: true,
  isActive: true
});
// billInfoStore.$subscribe(() => {
//   getStorage();
// });
function onBlur() {
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 0) {
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
  }
}
watch(
  () => input,
  () => {
    getLandArrange();
  },
  { immediate: true, deep: true }
);
function getLandArrange() {
  selectedArrangeItem.value = {} as ArrangeItem;
  const params = {
    planDate: input.planDate,
    timeSpace: input.timeSpace
  };
  isSearching.value = true;
  GetLandArrange(params)
    .then((res: any) => {
      console.log(res);
      arrangeList.value = [] as Array<ArrangeItem>;
      if (res.success && res.data.length > 0) {
        arrangeList.value = res.data;
        arrangeList.value.forEach(item => {
          item.info =
            item.lineNo +
            "-" +
            item.areaNames +
            "-" +
            item.packageBulkName +
            "-" +
            item.loadTypeName +
            "-" +
            item.landWorkTypeName;
          item.isChecked = false;
          if (input.arrangeId !== "" && input.arrangeId === item.walId) {
            item.isChecked = true;
            selectedArrangeItem.value = item;
          }
        });
      }
      isSearching.value = false;
    })
    .catch(() => {
      isSearching.value = false;
    });
}
function reset() {
  searchParams.spot = "";
  searchParams.isActive = true;
  searchParams.isLeft = true;
  getLandArrange();
}

function chooseArrange(data: ArrangeItem) {
  arrangeList.value.forEach(item => {
    item.isChecked = false;
  });
  data.isChecked = true;
  selectedArrangeItem.value = data;
}

function returnRes() {
  if (!selectedArrangeItem.value.walId) {
    showFailToast("请选择一个作业线");
    return;
  }
  emit("selectedArrange", selectedArrangeItem.value);
  showPop(false);
}

function showPop(show: boolean) {
  emit("isOpen", show);
}
</script>

<template>
  <div class="flex-col h-[full] p-[20px] w-full" style="background: #f6f6f6">
    <van-config-provider :theme-vars="themeVars">
      <div class="flex h-[30px] justify-between mb-[10px]">
        <div
          class="flex justify-center items-center h-full text-center text-base"
        >
          选择陆运作业线
        </div>
        <div
          class="flex h-full justify-center items-center text-center text-base"
        >
          <div class="text-sky-500" @click="returnRes">确定</div>
        </div>
      </div>
      <!--      <div class="flex flex-col w-[100%] h-[40px]">-->
      <!--        <div class="flex w-[100%] h-full">-->
      <!--          <div class="flex w-[50%] items-center">-->
      <!--            <div class="relative">-->
      <!--              <van-search-->
      <!--                v-model="searchParams.spot"-->
      <!--                left-icon=""-->
      <!--                :autofocus="false"-->
      <!--                :clearable="false"-->
      <!--                shape="round"-->
      <!--                calss="relative"-->
      <!--                background="transparent"-->
      <!--                placeholder="请输入关键词"-->
      <!--              >-->
      <!--              </van-search>-->
      <!--              <div class="absolute" style="top: 5px; right: 5px">-->
      <!--                <div-->
      <!--                  @click="getStorage"-->
      <!--                  class="w-[60px] h-[25px] leading-[25px] text-white text-sm tracking-wide text-center rounded-3xl bg-gradient-to-r from-blue-500 to-cyan-500"-->
      <!--                >-->
      <!--                  搜索-->
      <!--                </div>-->
      <!--              </div>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--          <div class="flex flex-1 justify-center items-center gap-2">-->
      <!--            <van-button-->
      <!--              class="h-[35px] flex"-->
      <!--              plain-->
      <!--              round-->
      <!--              @click="searchParams.isActive = !searchParams.isActive"-->
      <!--              v-if="!searchParams.isActive"-->
      <!--              >有效</van-button-->
      <!--            >-->
      <!--            <van-button-->
      <!--              class="h-[35px] flex"-->
      <!--              icon-position="right"-->
      <!--              icon="cross"-->
      <!--              plain-->
      <!--              round-->
      <!--              @click="searchParams.isActive = !searchParams.isActive"-->
      <!--              v-if="searchParams.isActive"-->
      <!--              type="primary"-->
      <!--              >有效</van-button-->
      <!--            >-->
      <!--          </div>-->
      <!--          <div class="flex flex-1 justify-center items-center gap-2">-->
      <!--            <van-button-->
      <!--              class="h-[35px] flex"-->
      <!--              plain-->
      <!--              round-->
      <!--              @click="searchParams.isLeft = !searchParams.isLeft"-->
      <!--              v-if="!searchParams.isLeft"-->
      <!--              >余货</van-button-->
      <!--            >-->
      <!--            <van-button-->
      <!--              class="h-[35px] flex"-->
      <!--              icon-position="right"-->
      <!--              icon="cross"-->
      <!--              plain-->
      <!--              round-->
      <!--              @click="searchParams.isLeft = !searchParams.isLeft"-->
      <!--              v-if="searchParams.isLeft"-->
      <!--              type="primary"-->
      <!--              >余货</van-button-->
      <!--            >-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
      <van-empty
        v-if="!arrangeList || arrangeList.length <= 0"
        description="暂无数据"
      />
      <div
        v-if="arrangeList && arrangeList.length > 0"
        class="w-full max-h-[590px] mt-[10px] flex flex-col overflow-auto"
      >
        <div
          v-for="item in arrangeList"
          :key="item.walId"
          :class="
            item.isChecked ? 'border-blue-400 border-solid border-[1px]' : ''
          "
          class="w-[95%] mx-auto my-[5px] p-[10px] flex-col h-auto rounded bg-white text-[13px] shadow"
          @click="chooseArrange(item)"
        >
          <div class="flex w-full h-auto">
            <div class="flex flex-1 justify-center items-center">
              <van-checkbox v-model="item.isChecked"></van-checkbox>
            </div>
            <div class="flex flex-col w-[85%] h-auto px-[10px] gap-1">
              <div class="flex">
                <div class="flex flex-1">
                  <span class="text-slate-400">作业线号：</span
                  >{{ item.lineNo }}
                </div>
              </div>
              <div class="flex">
                <div class="flex flex-1">
                  <span class="text-slate-400">装卸：</span
                  >{{ item.loadTypeName }}
                </div>
                <div class="flex flex-1">
                  <span class="text-slate-400">散杂：</span
                  >{{ item.packageBulkName }}
                </div>
              </div>
              <div class="flex">
                <div class="flex flex-1">
                  <span class="text-slate-400">作业类型：</span
                  >{{ item.landWorkTypeName }}
                </div>
              </div>
              <div class="flex">
                <div class="flex flex-1">
                  <span class="text-slate-400">区域：</span>{{ item.areaNames }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-config-provider>
  </div>
</template>

<style scoped></style>
